SPAの404 Not Foundを解決する
https://gyazo.com/eea9f5594dac6a462026ea471d468dbc
webpack-dev-serverで開発している場合、Cannot Get /hoge と表示される
SPAは、初回にindex.htmlをロードして、下の階層 (/about)へのアクセスはJavaScriptでDOMを更新するしくみ 直リンクすると/aboutに表示すべきhtmlがありません、と怒られてしまう
開発環境の404を解決する
code:webpack.config.js
module.exports = {
devServer: {
contentBase: path.join(__dirname, "public"),
port: 8888,
historyApiFallback: true,
},
2. webpack-dev-serverを起動し直す
$ npx webpack-dev-server
とか
$ npm start
npm scriptsに"start": "webpack-dev-server"としている場合
本番環境の404を解決する
ホスティングサービスを利用している場合
_redirectsファイルで解決する方法
_redirectsファイルをindex.htmlと同じ階層に設置する(public、distなど)
code:_redirects
/* /index.html 200
netlify.tomlファイルで解決する方法
GitHub Pages
設定ファイルで解決する方法はなし
自前でWebサーバーを構築している場合
nginx
nginx.conf try_files
Apache
.htaccess mod_rewrite
完全に余談だが、本当に404を解決すべきかどうかはきちんと議論する必要があると思うrmaruon.icon